import React, { useState } from 'react';
import { Input, Table, InputNumber, Modal, Form } from 'antd';
// import EditableTable from '../../components/EditableTable';
// import regexps from '@/utils/regexps';

const Index = props => {
    const dProducts = [
        {
            id: 1,
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
            quantity: 1,
        },
        {
            id: 2,
            key: '2',
        },
    ];
    const [allProducts, setAllProducts] = useState(dProducts);

    const replaceData = (targetId, dataList, newData) => {
        const targetIndex = dataList.findIndex(data => data.id === targetId);
        dataList.splice(targetIndex, 1, { ...dataList[targetIndex], ...newData });
        return dataList;
    };
    const handleCellChange = (rowtype, row) => {
        // const toUpdateInfo = type === 'product' ? allProducts : allAccessories;
        // const freshInfo = replaceData(row.id, toUpdateInfo, row);
        // if (type === 'product') {
        //     setAllProducts([...freshInfo]);
        // } else {
        //     setAllAccessories([...freshInfo]);
        // }
        const toUpdateInfo = dProducts;
        const freshInfo = replaceData(row.id, toUpdateInfo, row);
        setAllProducts(freshInfo);
        console.log('freshInfo', freshInfo);
        console.log('row', row);
    };
    const proColumns = [
        {
            title: '产品名称',
            align: 'center',
            dataIndex: 'name',
            width: 120,
        },
        {
            title: '产品型号',
            align: 'center',
            dataIndex: 'model',
            width: 120,
            // record 是从onCell传入的
            editable(record) {
                // 在获取数据后注入的字段，如果该字段是否为空则可输入，下同
                return record.modelEditable;
            },
            formItem: <Input maxLength={20} />,
        },
        {
            title: '数量',
            align: 'center',
            dataIndex: 'quantity',
            width: 100,
            editable: true,
            formItem: <InputNumber maxLength={9} min={0} precision={0} />,
        },
    ];
    const productTableProps = {
        // className: styles.editableTable,
        columns: proColumns,
        bordered: true,
        dataSource: allProducts,
        loading: false,
        pagination: false,
        rowKey: record => record.contract_product_id || `${record.name}-${record.model}`,
        size: 'small',
        scroll: { y: 240 },
        handleCellChange: handleCellChange.bind(null, 'product'),
    };
    // return <EditableTable {...productTableProps} />;
    return null
};
export default Index;
